<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-12 15:25:21
 * @LastEditors  : seraph
 * @LastEditTime : 2025-01-09 11:09:36
-->
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <!-- 这行代码用于设置视窗的宽度和缩放比例，确保网页在不同设备上显示正确 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document - 练习 - 使用 ES 模块构建版本</title>
    </head>
    <body>
        <div id="app">
            <h1>Hello World {{ name }}</h1>
            <p>使用 ES 模块构建版本</p>
            <button type="button" @click="changeName">Change Name</button>
        </div>

        <script lang="ts" type="module">
            import { ref, createApp, shallowRef } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
            const name = ref('AliYun');

            const changeName = () => {
                name.value = getRandomName();
                console.log(Date.now().toString().slice(-3), name.value);
            }

            const getRandomName = () => {
                const names = ['AliYun', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace', 'Henry', 'Ivy', 'Jack'];
                return names[Math.floor(Math.random() * names.length)];
            }

            const app = createApp({
                setup() {
                    return {
                        name,
                        changeName,
                    };
                }
            });
            app.mount('#app');
        </script>
    </body>
</html>